<template>
  <div id="hselect" :class="'h-select-'+lineStyleFocus">
    <label :class="showClass" v-show="status">{{labelText}}</label>
    <el-select
      :placeholder="placeholderText"
      @focus="select_focus"
      @blur="select_blur"
      size="mini"
      v-model="selectVal"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div class="liuh-select-bottom-line-parent">
      <div class="liuh-select-bottom-line-child" :class="lineStyle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "hSelect",
  props: {
    labelText: {
      type: String,
      default: "未知"
    },
    lineStyleFocus: {
      type: String,
      default: "default"
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      selectVal: '',
      lineStyle: "",
      showClass: "",
      placeholderText: "",
      status: false
    };
  },
  watch: {
    selectVal() {
      this.$emit('update:value', this.selectVal)
      // this.selectVal = ""
    }
  },
  created: function() {
    this.selectVal = this.value
    this.placeholderText = this.labelText;
  },
  methods: {
    select_focus(e) {
      this.status = true;
      this.placeholderText = "";
      this.showClass = "liuh-label liuh-label-show";
      this.lineStyle = "liuh-line-show";
    },
    select_blur() {
      if (this.selectVal === "") {
        setTimeout(() => {
          this.status = false;
          this.placeholderText = this.labelText;
        }, 580);
        this.showClass = "liuh-label liuh-label-hide";
      }
      this.lineStyle = "liuh-line-hide";
    }
  }
};
</script>

<style lang="less">
#hselect {
  position: relative;
  margin: 20px;
  font-family: SimHei;
  .liuh-select-bottom-line-child {
    width: 100%;
    height: 2px;
    float: left;
    position: absolute;
  }
  .liuh-select-bottom-line-parent {
    width: 100%;
    height: 1px;
    background-color: rgb(223, 211, 211);
    width: 100%;
    float: left;
    position: relative;
  }
  .el-select {
    width: 100%;
  }
}
.h-select-default {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: h-select-show-pass 0.6s ease-in-out 0s forwards;
  }
  .liuh-label-hide {
    animation: h-select-hide-pass 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-show {
    animation: line-show-primary 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-primary 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #fff;
    font-weight: 800;
    font-size: 12px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: #fff;
    font-size: 12px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
.h-select-primary {
  .liuh-label {
    position: absolute;
    top: -15px;
    z-index: 1000;
    display: block;
    float: left;
    padding: 0;
    color: #409eff;
    font-size: 15px;
    line-height: 20px;
    font-family: "Hiragino Sans GB";
    font-weight: 800;
    font-family: SimHei;
  }
  .liuh-label-show {
    animation: h-select-show-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-label-hide {
    animation: h-select-hide-pass 0.6s ease-in-out 0s backwards;
  }
  .liuh-line-show {
    animation: line-show-primary 0.6s ease-in-out 0s forwards;
  }
  .liuh-line-hide {
    animation: line-hide-primary 0.6s ease-in-out 0s forwards;
  }
  .el-input__inner::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #409eff;
    font-weight: 800;
    font-size: 15px;
  }
  .el-input__inner:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #409eff;
    font-weight: 800;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid rgb(143, 157, 168);
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-radius: 0;
    background-color: transparent;
    color: rgba(54, 49, 49, 0.6);
    font-size: 16px;
    padding-left: 30px;
    font-family: SimHei;
  }
}
@keyframes h-select-show-pass {
  0% {
    transform: translate3d(30px, 19px, 0);
  }
  100% {
    transform: translate3d(6px, 6px, 0);
  }
}
@keyframes h-select-hide-pass {
  0% {
    transform: translate3d(6px, 6px, 0);
  }
  100% {
    transform: translate3d(30px, 19px, 0);
  }
}
</style>